<script setup>
    //1. 普通文本的展示  {{ 属性名 }}
    let name = "root";
    //2. 函数结果展示 [要求函数有返回值]  {{函数名()}}
    let sum = ()=>1+1;
    //3. 文本展示的细节问题 (对象 , 数组 , 运算)
    let person = {name:"admin"};
    let stars = ["高圆圆","圆圆高","圆高圆"]
    let age = 18;
    //------------------  底层的dom原理 innerText ---------------------------------
    //4. 展示带有样式的文本
    let  msg = "<font color='red'>登录失败!!</font>"
    //定义一个标签   v-html="{{key}}"
</script>

<template>
  <div>
    <!-- 1. 插值表达式即可 {{ key }} -->
     {{ name }} <br>
     <font color='red'>{{name}}</font>
     {{ sum() }}
     <hr/>
     {{person }}  name: {{person.name}} <br>
     我喜欢 {{stars.length}} 个明星, 他们是:{{ stars }} ,我喜欢的第一个明星是: {{stars[0]}}
     你的年龄是: {{age}} 岁! 你{{ age>=18?'是':'否' }}成年!

     <hr/>
     {{ msg}} 
     <span v-text="msg"></span>
     <span v-html="msg"></span>
    
     
  </div>
</template>

<style scoped>

</style>